<template>
  <topChartContent title="生产销售完成情况">
    <div id="produceChartContainer">
      <div
        class="pieChart"
        v-for="(item, index) in Object.keys(produceKeys)"
        :key="index"
        :id="'pie' + index"
      ></div>
    </div>
  </topChartContent>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import topChartContent from "../baseComponent/topChartContent.vue";
import * as echarts from "echarts";
import { produceStatus } from "@/request/product";

let produceChart = null;
let produceKeys = {
  plan: "计划生产",
  getOrder: "已接订单",
  produce: "已经完成",
};

const createPie = (data, title, pieDom) => {
  produceChart = echarts.init(pieDom);
  let options = {
    title: {
      text: title + "\n" + data[0],
      left: 'center',
      top: 'center',
      textStyle: {
        color: "#fff",
        fontSize: 30
      },
    },
    series: [
      {
        type: "pie",
        radius: ['54%', '76%'],
        left: 20,
        right: 20,
        label: {
          show: false,
        },
        data: [
          {
            value: data[0],
            itemStyle: {
              color: '#007CDD'
            }
          },
          {
            value: data[1],
            itemStyle: {
              color: 'RGBA(5, 33, 70, 0.8)'
            }
          }
        ],
      },
      {
        type: 'pie',
        name: 'out',
        left: 20,
        right: 20,
        label: {
          show: false,
        },
        radius: ['80%', '84%'],
        data: [100],
        itemStyle: {
          color: '#0A2A50'
        }
      },
      {
        type: 'pie',
        name: 'inside',
        left: 20,
        right: 20,
        label: {
          show: false
        },
        data: [100],
        radius: ['47%', '50%'],
        itemStyle: {
          color: '#0A2A50'
        }
      }
    ],
  };
  produceChart.setOption(options);
};

onMounted(async () => {
  let {
    data: { data: produceData },
  } = await produceStatus();
  produceData.map((item, index) => {
    let seriesData = [];
    if (Object.keys(produceKeys).includes(item.name)) {
      seriesData = [item.finish, item.total - item.finish];
      createPie(
        seriesData,
        produceKeys[item.name],
        document.getElementById("pie" + index)
      );
    }
  });
});

onUnmounted(() => {
  echarts.dispose(produceChart);
  produceChart = null;
});
</script>

<style lang="less" scoped>
#produceChartContainer {
  width: 100%;
  height: 100%;
  display: flex;
  .pieChart {
    flex: 1;
  }
}
</style>
